<template>
  <div class="Detail">
    <!-- 导航栏 -->
    <div class="Search-search">
      <div class="Search-i">
        <van-icon name="arrow-left" @click="back" size="25" />
      </div>
      <Search />
      <div class="Search-i">
        <van-icon name="guide-o" size="25" />
      </div>
      <div class="Search-i">
        <van-icon name="cart-o" size="25" />
      </div>
      <div class="Search-i">
        <van-icon name="ellipsis" size="25" />
      </div>
    </div>
    <!-- 商品图片 -->
    <van-tabs v-model="active" scrollspy sticky>
      <!-- <van-tab v-for="index in 8" :title="'选项 ' + index">
        内容 {{ index }}
      </van-tab> -->
      <van-tab :title="'宝贝'">
        <div class="Search-swiper" style="height=innerWidth">
          <van-swipe @change="onChange">
            <van-swipe-item v-for="(image, index) in swiper" :key="index">
              <img
                @click="handlePreview"
                class="swi-img"
                :src="
                  'https://chadian-img.oss-cn-shanghai.aliyuncs.com/' +
                  image.img_url +
                  '?x-oss-process=image/resize,m_fill,w_600,h_600'
                "
              />
            </van-swipe-item>
          </van-swipe>
          <div class="swiper-num">
            <span class="swiperNum">{{ current + 1 }}&nbsp;</span>
            <em>/</em>
            <span class="swiperNum">&nbsp;{{ swiper.length }}</span>
          </div>
          <div class="main-activity">
            <div class="activity1">
              <div class="activity-price__wrap">
                <span>￥</span>
                <span>{{ info.activityprice }}</span>
              </div>
              <div class="activity-price__description">
                价格
                <span style="text-decoration:line-through"> ￥ {{ info.marketprice }} </span>
              </div>
            </div>
            <div class="activity2">
              <div class="activity-countdown__label">活动已结束</div>
              <van-count-down :time="time">
                <template #default="timeData">
                  <span class="block">{{ timeData.hours }}</span>
                  <span class="colon">:</span>
                  <span class="block">{{ timeData.minutes }}</span>
                  <span class="colon">:</span>
                  <span class="block">{{ timeData.seconds }}</span>
                </template>
              </van-count-down>
            </div>
          </div>
        </div>
      </van-tab>
      <div class="detail-box1 detail-box">
        <div>
          <span class="m-goods__tag" >v店</span>
          <span
            >{{info.productname}}</span
          >
        </div>
        <ul class="detail-box1-ul">
          <li>快递 0.00</li>
          <li>月销 {{info.buycount}}</li>
          <li>{{total}}</li>
        </ul>
      </div>
      <div class="detail-box2 detail-box">
        <div>
          <div>
            <span class="d2-sp1">服务</span>
          </div>
          <div>
            <span class="d2-sp2">破损包退 360保障 正品保证 7天无理由包退</span>
          </div>
        </div>
        <div style="width: 100%">
          <div>
            <span class="d2-sp1">参数</span>
          </div>
          <div style="display: inline-block">
            <div style="font-size: 0.5rem">生产日期 品牌 ...</div>
            <van-popup
              v-model="show"
              round
              position="bottom"
              :style="{ height: '70%' }"
            >
              <p class="pop-header">产品参数</p>
              <p v-for="(item, index) in attr" :key="index" class="pop-p">
                <span class="pop-s1">{{ item.attr_name }}</span
                ><span class="pop-s2">{{ item.attr_value }}</span>
              </p>
              <van-button @click="show=false" type="primary" size="large" color="#ee0a24" round
                >完成</van-button
              >
            </van-popup>
          </div>
          <div class="decc"><van-icon @click="show = true" name="arrow" /></div>
        </div>
      </div>
      <van-tab :title="'评价'">
        <div class="detail-box2 detail-box">
          <div>
            <div>
              <span class="d2-sp1">暂无评论</span>
            </div>
          </div>
        </div>
        <div class="detail-box3 detail-box">
          <div>
            <div
              style="
                color: #000 !important;
                margin-bottom: 0.5rem;
                margin-left: 0.3rem;
              "
            >
              <span class="d2-sp1">店铺推荐</span>
            </div>
          </div>
          <div style="display: block">
            <van-row>
              <van-col v-for="(item, index) in srlist" :key="index" span="8">
                <div style="height:7rem">
                  <img
                    :src="
                      'https://chadian-img.oss-cn-shanghai.aliyuncs.com/' +
                      item.picurl +
                      '?x-oss-process=image/resize,m_fill,w_600,h_600'
                    "
                  />
                </div>
                <div class="ddt">
                  <p>{{ item.productname }}</p>
                </div>
                <span style="font-size: 0.5rem; color: #ee0a24">￥</span
                ><span style="color: #ee0a24">{{ item.memberprice }}</span>
              </van-col>
            </van-row>
          </div>
        </div>
      </van-tab>
      <van-tab :title="'详细'">
        <div class="detail-picture">
          <span>宝贝描述</span>
        </div>
        <p class="dp-p" v-for="(item, index) in detailPicList" :key="index">
          <img
            :src="
              'https://chadian-img.oss-cn-shanghai.aliyuncs.com/' + item.PicBig
            "
          />
        </p>
      </van-tab>
      <van-tab :title="'推荐'">
        <div class="detail-picture">
          <span>猜您喜欢</span>
        </div>
        <!-- 商品列表 -->
        <van-row>
          <van-col
            v-for="(item, index) in recommendlist"
            :key="index"
            span="12"
          >
            <div>
              <img
                :src="
                  'https://chadian-img.oss-cn-shanghai.aliyuncs.com/' +
                  item.picurl +
                  '?x-oss-process=image/resize,m_fill,w_300,h_300'
                "
              />
            </div>
            <div class="detailbody">
              <div>
                <div class="detailgt">
                  <span>{{ item.productname }}</span>
                </div>
              </div>
              <div>
                <span class="detailpric"
                  ><span>￥</span>{{ item.memberprice }}</span
                >
                <span class="detailpeo">{{ item.buycount }}人付款</span>
              </div>
            </div>
          </van-col>
        </van-row>
      </van-tab>
    </van-tabs>
    <!-- 商品导航 -->
    <van-goods-action>
      <van-goods-action-icon icon="service-o" text="客服" />
      <van-goods-action-icon icon="shop-o" text="店铺" />
      <van-goods-action-icon icon="star-o" text="收藏" />
      <van-goods-action-button @click="addCart('/cart')" type="warning" text="加入购物车" />
      <van-goods-action-button @click="addCart('/Checkout')" type="danger" text="立即购买" />
    </van-goods-action>
  </div>
</template>

<script>
import Search from "../components/Search.vue";
import { GetDetailData } from "../api/xly-api";
import { ref } from "vue";
import { Toast } from "vant";
import { ImagePreview } from "vant";
export default {
  components: {
    Search,
  },
  data() {
    return {
      swiper: [],
      current: 0,
      active: 0,
      images: [],
      time: 30 * 60 * 60,
      info: [],
      detailPicList: [],
      recommendlist: [],
      srlist: [],
      attr: [],
      show: false,
      total:"null",
      storeInfo:{
                    id: 1,
                    "shopname": "私家古茶店",
                    "is_checked": true,
                    product: "土林凤凰云南无量山普洱茶砖250克熟茶糯米香普洱茶砖茶叶607特级",
                    "product_img": "https://chadian-img.oss-cn-shanghai.aliyuncs.com/Upload/bb8a7c4703314fd9940fb852f46d2058.jpg",
                    "shop_price": "80.00",
                    num: 1
                },
      storeInfo:[

      ]
    };
  },
  created() {
    let id = this.$route.query.detailId
    GetDetailData(id).then((res) => {
      // console.log(res.data.data);
      this.total = res.data.data.data.region
      this.detailPicList = res.data.data.data.detailpiclist;
      this.swiper = res.data.data.data.piclist;
      this.recommendlist = res.data.data.recommendlist;
      this.info = res.data.data.info;
      this.srlist = res.data.data.shop_recommend_list;
      this.attr = res.data.data.attr;

      this.storeInfo.id = res.data.data.info.id
      this.storeInfo.shopname = res.data.data.data.shopname
      this.storeInfo.product = res.data.data.info.productname
      this.storeInfo.product_img = 'https://chadian-img.oss-cn-shanghai.aliyuncs.com/'+this.swiper[0].img_url+'?x-oss-process=image/resize,m_fill,w_600,h_600'
      this.storeInfo.shop_price = res.data.data.info.activityprice
      console.log(this.storeInfo);

      this.swiper.forEach((element) => {
        this.images.push(
          "https://chadian-img.oss-cn-shanghai.aliyuncs.com/" +
            element.img_url +
            "?x-oss-process=image/resize,m_fill,w_600,h_600"
        );
        // console.log(this.images)
      });
    });
    
    
  },
  methods: {
    onChange(index) {
      this.current = index;
      // console.log(this.current);
    },
    handlePreview() {
      ImagePreview({
        images: this.images,
        startPosition: this.current,
      });
    },
    back(){
      this.$router.back()
    },
    addCart(path){
      console.log(this.storeInfo);
      let{storeInfo}=this
      this.$store.commit('ddk/addCartMut',storeInfo)
      this.$router.push(path)
    },
  },
  setup() {
    const active = ref(0);
    const onClickTab = ({ title }) => Toast(title);
    return {
      active,
      onClickTab,
    };
  },
};
</script>

<style src='../assets/css/Detail.css' scoped></style>
<style lang='less' scoped>
/deep/ .van-swipe__indicators {
  display: none;
}
/deep/.van-cell__title {
  width: 20%;
}
/deep/.van-popup {
  padding: 0 !important;
}
/deep/.van-overlay {
  background: rgba(0, 0, 0, 0.4);
}
.Detail{
    background-color: #f4f4f4;
}
.Search-search{
    display:flex;
    align-items: center;
    background: rgb(244, 244, 244);
    text-align: center;
}
.van-search{
    width: 60%;
}
.Search-i{
    width: 10%;
    color: #747474;
}
.van-search__content{
    background: #fff;
}
.Search-swiper{
    width: 100%;
    position: relative;
}
.van-swipe-item img{
    width: 100%;
}
.swiper-num{
    position: absolute;
    bottom: 5.4rem;
    right: 0.4rem;
    color: #fff;
    font-size: .46667rem;
    line-height: 1.3rem;
    padding: 0 0.46667rem;
    border-radius: 10em;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    background-color: rgba(0,0,0,.5);
    z-index: 8;
}
.main-activity{
    display:flex;
}
.activity1{
    width:75%;
    background-color: #ee0a24;
    padding: 0.4rem 0 0.4rem 0.4rem;
    color: #fff;
}
.activity2{
    width:25%;
    background-color: #fdff4f;
    padding: 0.4rem 0 0.4rem 0.4rem;
    position: relative;
}
.swi-img{
    vertical-align: top;
}
.activity-price__wrap{
    font-size: 1.25rem;
}
.activity-price__description{
    font-size: 0.8rem;
    padding-left: 0.2rem;
}
.colon {
    display: inline-block;
    margin: 0 4px;
    color: #ee0a24;
  }
  .block {
    display: inline-block;
    width: 1.2rem;
    color: #fff;
    font-size: 12px;
    text-align: center;
    background-color: #ee0a24;
    border-radius:0.2rem ;
  }
.activity-countdown__label{
    font-size: 0.8rem;
    color: #ee0a24;
    text-align: center;
}
.van-count-down{
    margin-top: 0.3rem;
    text-align: center;
}
.activity2::after{
    content: "";
    position: absolute;
    top: -0.05rem;
    left: -2.72rem;
    width: 0;
    height: 0;
    border: 0.48rem dashed transparent;
    border-width: 1.78rem 1.78rem 1.78rem 1rem;
    border-right-style: solid;
    border-right-color: #fdff4f;
}
.m-goods__tag {
    margin-right: 0.20667rem;
    display: inline-block;
    color: #fff;
    font-size: .7em;
    font-weight: 400;
    line-height: 1.1rem;
    padding: 0 0.5rem;
    border-radius: 1.2rem;
    vertical-align: 0.5333rem;
    background-color: #ee0a24;
    position: relative;
    top: .44rem;
}
.detail-box1,.detail-box{
    margin: 0.6rem 0.6rem 0;
    border-radius: 0.4rem;
    background-color: #fff;
    overflow: hidden;
    padding: 0.4rem;
}
.detail-box1-ul{
    margin-top: 0.8rem;
    display:flex;
    justify-content: space-between;
}
.detail-box1-ul li{
    font-size: .32rem;
    line-height: .42667rem;
    padding: 0.26667rem;
    color: #747474;
}
.detail-box2 div{
    display: inline-block;
    line-height: 1rem;
    padding: 0.5rem;
}
.d2-sp1{
    font-size: 0.5rem;
    color: #747474;
}
.d2-sp2{
    font-size: 0.5rem;
}
.detail-picture{
    position: relative;
    padding: 0.2rem 0;
    text-align: center;
    line-height: .48rem;
    font-size: 0.8rem;
    color: #747474;
}
.detail-picture span{
    position: relative;
    display: inline-block;
    color: #969799;
    line-height: 0.5rem;
    padding: 1rem;
    background-color: #f4f4f4;
    z-index: 2;
}
.detail-picture::after{
    content: " ";
    position: absolute;
    pointer-events: none;
    box-sizing: border-box;
    top: 0;
    right: 0;
    left: 50%;
    border-top: 1px solid #969799;
    -webkit-transform: scaleY(.5);
    transform: scaleY(.5);
    top: 50%;
    width: 40%;
    -webkit-transform: scaleY(.5) translateX(-50%);
    transform: scaleY(.5) translateX(-50%);
}
.dp-p{
    margin: 0;
    width: 100%;
}
.dp-p img{
    width: 100%;
    vertical-align: middle;
}
.van-col{
    padding: .5rem;
}
.van-col>div{
    background-color: #fff;
    border-radius: .5rem;
    overflow: hidden;
}
.van-col div img{
    width: 100%;
}
.detailgt{
    display: -webkit-box;
    text-overflow: ellipsis;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    height: calc(var(--m-goods-title-line-height)*2);
    max-height: calc(var(--m-goods-title-line-height)*2);
    font-size: 0.9rem;
    color: #323232;
    margin-bottom: .2rem;
}
.detailbody{
    padding: .5rem;
}
.detailpric{
    color: #ee0a24;
}
.detailpric span{
    font-size: .5rem;
}
.detailpeo{
    color: #969799;
    font-size: .6rem;
    margin-left: .2rem;
}
.van-goods-action{
    z-index: 10;
}
.ddt{
    display: -webkit-box;
    text-overflow: ellipsis;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    height: calc(var(--m-goods-title-line-height)*2);
    max-height: calc(var(--m-goods-title-line-height)*2);
    font-size: .9rem;
}
.detail-box3 .van-col{
    padding: .2rem;
}
.ddt p{
    margin: 0;
}
.decc{
    position: relative;
    right:-9rem;
}
.pop-header{
    text-align: center;
    font-size: 1rem;
}
.pop-p{
    padding: .5rem;
    border-bottom: 1px solid #f4f4f4;
}
.pop-s1{
    font-size: .8rem;
    color: #969799;
    display: inline-block;
    width: 4rem;
}
.pop-s2{
    font-size: .8rem;
    margin-left: 1.5rem;
}
.van-popup .van-button{
    position: fixed;
    bottom: 0;
}
.van-button__content{
    display: flex !important;
    padding: 0 !important;
}
// .van-col>div>img{
//   height: 6rem;
// }
</style>